<style media="screen">
  .details-page .tab-container {
    background-color: #f7f7f7;
    overflow: hidden;
    border-bottom: 1px solid #e5e5e5;
  }

  .details-page .tab-container .title {
    float: right;
    line-height: 56px;
    padding-right: 24px;
  }

  .details-page .tab-wrap {
    float: left;
  }

  .details-page .tab-wrap button {
    height: 56px;
    line-height: 56px;
    padding: 0 15px;
    border: 0;
    background: 0 0;
    border-radius: 0;
  }

  .details-page .tab-wrap button.active {
    color: #5e67a5;
    border-bottom: 3px solid #5e67a5;
  }

  .business-follow-container .tb-title {
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fcfcfc), to(#ececec))
  }

  .business-follow-container .scroll-wrap {
    overflow: hidden;
  }

  .business-follow-container div.showScroll {
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .hl-table .tb-content .content-item div {
    float: left;
  }

  .text-hover-top {
    position: absolute;
    width: 200px;
    padding: 15px;
    background-color: #fff;
    z-index: 9;
    color: #999;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2));
    border-radius: 4px;
    line-height: 24px;
  }

  .text-hover-top::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -10px;
    width: 0;
    height: 0;
    border-width: 0 10px 10px;
    border-style: solid;
    border-color: transparent transparent #fff;
    transform: translate(-50%, 0);
  }

  .contacter {
    width: 960px;
    height: 164px;
    margin: 33px 0 25px 0;
    box-shadow: 0px 0px 8px 0px rgba(214, 214, 214, 0.75);
    border-radius: 4px;
    border: 1px solid rgba(229, 229, 229, 1);
  }

  .contacter ul {
    height: 40px;
    border-bottom: 1px solid #F2F2F2;
    display: flex;
  }

  .contacter ul li {
    display: flex;
    justify-content: center;
    align-items: center
  }

  .contacter ul li span {
    color: rgba(51, 122, 183, 1);
    cursor: pointer;
  }

  .contacter ul li:nth-child(1) {
    width: 120px
  }

  .contacter ul li:nth-child(2) {
    width: 365px
  }

  .contacter ul li:nth-child(3) {
    width: 365px
  }

  .contacter ul li:nth-child(4) {
    width: 106px;
    border-left: 1px solid #F2F2F2;
  }

  .contacter ul:last-child {
    border-bottom: none
  }

  .contacter_title {}

  .flexItem {
    display: flex;
    align-items: center
  }

  .inputbox input {
    width: 390px;
    height: 34px;
    border-radius: 4px;
    margin-right: 10px;
    box-shadow: 0 0 4px rgba(214, 214, 214, .75) inset;
    border-radius: 4px;
    border: 1px solid #eee;
    padding-left: 13px;
  }

  .itemcontacter:hover {
    background: #F9F9F9 !important
  }

  .cmr-basis {
    margin: 20px 0
  }

  #business-details .pop .content {
    background-color: #f9f9f9;
    padding: 0 16px;
  }

  .change_show {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #565E99;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 10px;
    cursor: pointer;
  }

  .recordItem {
    position: relative;
  }

  .recordItem_6 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #565E99;
    position: absolute;
    top: 0;
    left: -18px;
  }

  .recordItem_1 {
    font-size: 14px;
    color: #999;
    position: relative;
    top: -5px;
  }

  .recordItem_2 {
    font-size: 14px;
    color: #666;
    margin: 5px 0 10px 0;
  }

  .recordItem_3 {
    padding: 10px;
    font-size: 14px;
    color: #666;
    background: #F2F2F2;
  }

  .recordItem_3 {
    padding: 10px;
    background: #F2F2F2;
  }

  .recordItem_4 {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    padding: 10px;
    background: #F2F2F2;
  }

  .recordItem_5 {
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
    color: #999;
  }

  .hoverTexts {
    position: absolute;
    z-index: 9999;
    width: 200px;
    flex-direction: column;
    padding-top: 12px;
    color: #999;
    line-height: 20px;
  }

  .hoverTexts div {
    position: absolute;
    display: inline-block;
    top: 7px;
    left: 100px;
    width: 0;
    height: 0px;
    content: '';
    border-style: solid;
    border-width: 6px;
    border-color: #fff #fff transparent transparent;
    transform: rotate(315deg);
    box-shadow: 2px -2px 2px #ccc;
    color: #999;
  }

  .instro {
    width: 100%;
    padding: 8px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 4px 2px rgba(200, 200, 200, .75);
  }
</style>

<section>
  <div id="business-details" class="details-page">
    <page-tab :data="tabData" :selected-index="tabSelectedIndex" prefix="线索管理" @on-item-click="handleSelectedTab">
    </page-tab>

    <section class="pl-24 pr-24 mt-15" v-if="tabSelectedName == '访客单'">
      <div class="hl-table">
        <div class="scroll-wrap">
          <ul class="tb-title dy-flex"
            style="background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fcfcfc), to(#ececec));">
            <li class="dy-fx-1">访客单号</li>
            <li class="dy-fx-1">访客单类型</li>
            <li class="dy-fx-1">渠道分类</li>
            <li class="dy-fx-1">渠道名称</li>
            <li class="dy-fx-1">客户名称</li>
            <li class="dy-fx-1">联系方式</li>
            <li class="dy-fx-1">操作</li>
          </ul>
          <div class="tb-content">
            <ul class="content-item dy-flex" v-for="item in visitorFormInfo">
              <li class="dy-fx-1 border-r">
                <a :href="'#/intentionalDetail?ddtab=true&clear=true&id='+item.id" target="_blank">{{item.no}}</a>
              </li>
              <li class="dy-fx-1 border-r">{{item.typeVal}}</li>
              <li class="dy-fx-1 border-r">{{item.channelCategoryCodeVal}}</li>
              <li class="dy-fx-1 border-r">{{item.channelNameCodeVal}}</li>
              <li class="dy-fx-1 border-r">{{item.customerName}}</li>
              <li class="dy-fx-1 border-r">{{item.customerPhone}}</li>
              <li class="dy-fx-1">
                <a @click="visitor_form_info_cancel(item)">取消关联</a>
              </li>
            </ul>
          </div>
        </div>
    </section>

    <div style="padding:0 24px">
      <div class="hl-global-detail-box">
        <!-- 线索详情 -->
        <section class="contract-detail-container" v-show="loadBuinessMesModule">
          <!-- 基本信息 -->
          <div class="border-b pb-10">
            <div class="title-wrap" style="overflow:hidden;">
              <h3 class="title pull-left" style="margin-bottom: 0;">主要信息</h3>
              <hl-button style="marginTop:13px;float:right" size="mini" @on-click="editBusiness"
                v-if=" data.themeInfo.status == 'SJJH' && quanxian.indexOf('c148') > -1 ">编辑</hl-button>
            </div>

            <div class="hl-row">
              <div style="width: 100%;" class="hl-row-item">
                <div class="title">主题：</div>
                <div class="item">{{data.themeInfo.theme | formatUndefined}}</div>
              </div>
            </div>

            <div class="hl-row">
              <div class="hl-row-item">
                <div class="title">状态：</div>
                <div class="item">
                  <span v-if=" data.themeInfo.status == 'SJJH' ">激活</span>
                  <span v-if=" data.themeInfo.status == 'SJGB' ">关闭</span>
                  <span v-if=" data.themeInfo.status == 'YZKH' ">已转客户</span>
                </div>
              </div>
              <div class="hl-row-item">
                <div class="title">对接人：</div>
                <div class="item">{{data.themeInfo.assigneeName | formatUndefined}}</div>
              </div>
            </div>
            <div class="hl-row">
              <div style="width: 100%;" class="hl-row-item">
                <div class="title" v-if=" data.themeInfo.status == 'SJGB' ">关闭原因：</div>
                <div class="item" v-if=" data.themeInfo.status == 'SJGB' ">
                  {{data.themeInfo.closeReason | formatUndefined}}
                </div>
              </div>
            </div>
            <div class="hl-row">
              <div style="width: 100%;" class="hl-row-item">
                <div class="title" v-if=" data.themeInfo.status == 'SJGB' ">关闭说明：</div>
                <div class="item" v-if=" data.themeInfo.status == 'SJGB' ">
                  {{data.themeInfo.closeDescription | formatUndefined}}
                </div>
              </div>
            </div>
            <div class="hl-row">
              <div class="hl-row-item">
                <div class="title">线索来源：</div>
                <div class="item">{{data.themeInfo.sourceValue | formatUndefined}}</div>
              </div>
              <div class="hl-row-item">
                <div class="title">创建人：</div>
                <div class="item">{{data.themeInfo.creatorName}}</div>
              </div>
            </div>
            <div class="hl-row">
              <div class="hl-row-item">
                <div class="title">渠道分类：</div>
                <div class="item">{{data.themeInfo.channelCategoryValue | formatUndefined}}</div>
              </div>
              <div class="hl-row-item">
                <div class="title">渠道名称：</div>
                <div class="item">{{data.themeInfo.channelNameValue | formatUndefined}}</div>
              </div>
            </div>
            <div class="hl-row">
              <div style="width: 100%;" class="hl-row-item">
                <div class="title">详细描述：</div>
                <div class="item" style="word-wrap:break-word;">{{data.themeInfo.description | formatUndefined}}
                </div>
              </div>

            </div>
          </div>
          <!-- 客户信息 -->
          <div class="border-b pb-10 hl-global-detail-box">
            <h3 class="title" style="margin-bottom: 0;">客户信息</h3>
            <div class="hl-row">
              <div class="hl-row-item">
                <div class=" title">客户名称：</div>
                <div class=" item"><span
                    v-if="data.themeInfo.status != 'YZKH'">{{data.zlfInfo.customerName | formatUndefined}}</span>
                  <a v-if="data.zlfInfo.customerId && data.themeInfo.status == 'YZKH'"
                    :href="'#/customerDetails?id='+data.zlfInfo.customerId+'&ddtab=true&page=customerManagement'">{{data.zlfInfo.customerName | formatUndefined}}</a>
                </div>
              </div>
              <div class="hl-row-item">
                <div class="title">客户类型：</div>
                <div class="item">
                  <span v-if="data.zlfInfo.customerType == 'QY'">公司</span>
                  <span v-if="data.zlfInfo.customerType == 'PE'">个人</span>
                </div>
              </div>
            </div>
            <div class="hl-row">
              <div v-if=" data.zlfInfo.customerType == 'QY'" class="hl-row-item">
                <div class="title" title="纳税人识别号">纳税人识别号：</div>
                <div class="item">{{data.zlfInfo.idcode | formatUndefined}}</div>
              </div>
              <div v-if=" data.zlfInfo.customerType == 'PE'" class="hl-row-item">
                <div class="title">身份证号：</div>
                <div class="item">{{data.zlfInfo.idcode | formatUndefined}}</div>
              </div>
              <div class="hl-row-item">
                <div class="title">所属行业：</div>
                <div class="item">{{data.zlfInfo.industryName | formatUndefined}}</div>
              </div>
            </div>
            <div class="hl-row">
              <div class="hl-row-item">
                <div class="title">联系人：</div>
                <div class="item">{{data.zlfInfo.lperson | formatUndefined}}</div>
              </div>
              <div class="hl-row-item">
                <div class="title">联系电话：</div>
                <div class="item">{{data.zlfInfo.phone | formatUndefined}}</div>
              </div>
            </div>
            <div class="hl-row">
              <div class="hl-row-item">
                <div class="title">公司邮箱：</div>
                <div class="item">{{data.zlfInfo.email | formatUndefined}}</div>
              </div>
              <div class="hl-row-item">
                <div class="title">邮编：</div>
                <div class="item">{{data.zlfInfo.zipcode | formatUndefined}}</div>
              </div>
            </div>
            <div class="hl-row">
              <div style="width: 100%;" class="hl-row-item">
                <div class="title">通讯地址：</div>
                <div class="item">{{data.zlfInfo.customerAddress | formatUndefined}}</div>
              </div>
            </div>
          </div>
        </section>
        <!-- 跟进记录 -->
        <section class="business-follow-container" style="margin-top:20px;" v-show="loadFollowModule">
          <div class="change_show" @click="showFlag = !showFlag"><span class="icon-GM-switch"
              style="margin-right: 5px;"></span>切换显示方式</div>
          <div class="hl-table" v-show="showFlag" @mouseenter="showScroll" @mouseleave="hideScroll"
            v-if="followList.length">
            <div class="scroll-wrap" :class="{'showScroll':isScroll}" ref="scrollLeft">
              <ul class="tb-title" style="width:1150px;">
                <li style="width:80px;">总跟进次数</li>
                <li style="width:80px;">意向水平</li>
                <li style="width:140px;">跟进时间</li>
                <li style="width:78px;">跟进人</li>
                <li style="width:88px;">跟进方式</li>
                <li style="width:200px;">跟进记录</li>
                <li style="width:140px;">计划跟进时间</li>
                <li style="width:200px;">计划跟进内容</li>
                <li style="width:144px;" @click="sortByRecordTime">记录时间
                  <span class="icon-Gm-sort-default bt-icon"><span class="path1"></span><i class="path2"></i></span>
                </li>
              </ul>
              <div class="tb-content" style="width:1150px;">
                <div class="content-item" v-for="(item,index) in followList">
                  <div style="width:80px;">{{ index + 1 }}</div>
                  <div style="width:80px;" class="ellipsis-1">{{item.intentLevel | formatIntentLevel}}</div>
                  <div style="width:140px;" class="ellipsis-1">{{item.followupTime | formatYYYYMMddHHmmss}}</div>
                  <div style="width:78px;" class="ellipsis-1">{{item.followUsername | formatUndefined}}</div>
                  <div style="width:88px;" class="ellipsis-1">{{item.followupTypeCode | formatFollowUpType}}</div>
                  <div style="width:200px;" class="">{{item.memo | max8lenOff}}
                    <a class="mr-5 cursor relative" v-if="item.memo.length > 8"
                      @mouseenter="hoverText($event, item.memo)" @mouseleave="mouseleaveOut"
                      style="display: inline-block">
                      详情
                    </a>
                  </div>
                  <div style="width:140px;" class="ellipsis-1">{{item.planFollowupTime | formatYYYYMMddHHmmss}}</div>
                  <div style="width:200px;" class="">{{item.planFollowupContent | max8lenOff}}
                    <a class="mr-5 cursor relative" v-if="item.planFollowupContent.length > 8"
                      @mouseenter="hoverText($event, item.planFollowupContent)" @mouseleave="mouseleaveOut">详情</a>
                  </div>
                  <div style="width:144px;" class="ellipsis-1x">{{item.recordTime | formatYYYYMMddHHmmss}}</div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="!showFlag" style="border-left:2px solid #EDEDED;padding-left:12px">
            <ul v-for="(item,index) in followList" class="recordItem">
              <li class="recordItem_1">
                <span
                  style="margin-right:8px">{{item.followupTime | formatDate}}</span>{{item.followupTypeCode | formatFollowUpType}}<span></span>
              </li>
              <li class="recordItem_2">{{item.followUsername}}</li>
              <li class="recordItem_3" v-if="item.memo">{{item.memo}}</li>
              <li class="recordItem_4">
                <span style="margin-bottom:10px">计划跟进时间：{{item.planFollowupTime | formatDate}}</span>
                <span>计划跟进内容：{{item.planFollowupContent || '--'}}</span>
              </li>
              <li class="recordItem_5">记录时间：{{item.recordTime | formatDate}}</li>
              <li class="recordItem_6"></li>
            </ul>
          </div>
        </section>
        <!-- 初步意向 -->
        <div class="cmr-yxCustomer cmr-basis" v-show="loadInitIntentModule">
          <!-- 意向列表 -->
          <section v-for="(item,index) in willsList">
            <!-- 展示 -->
            <div v-if="editYxIndex !== index">
              <div class="clearfix">
                <div class="title pull-left">意向信息{{index + 1}}</div>
                <div class="pull-right">
                  <hl-button size="mini" @on-click="deleteWill(item.intentId)">删除</hl-button>
                  <hl-button size="mini" @on-click="editWill(index)">编辑</hl-button>
                </div>
              </div>
              <div class="cmr-outerlayer">
                <div class="dy-flex">
                  <div class="dy-fx-1">需求时间：{{item.intentStartDate | formatDate}} 至 {{item.intentEndDate | formatDate}}
                  </div>
                </div>
                <div class="dy-flex">
                  <div class="dy-fx-1">需求类型：{{item.intentType == 'ER' ? '整租':'工位'}}</div>
                </div>
                <div class="dy-flex">
                  <div class="dy-fx-1" v-if="item.intentType == 'WR'">需求个数：{{item.intentAcreage}}个</div>
                  <div class="dy-fx-1" v-if="item.intentType == 'ER'">需求面积：{{item.intentAcreageVal}}m²</div>
                </div>
                <div class="dy-flex">
                  <div class="dy-fx-1">需求车位：{{item.intentParkingNum}}个</div>
                </div>
				<div class="dy-flex">
				  <div class="dy-fx-1">预算金额：{{item.budgetAmount | formatNum}}元</div>
				</div>
                <div class="dy-flex">
                  <div class="dy-fx-1">意向项目：{{item.projectInfo.projectName}}</div>
                </div>

                <div v-if="item.intentType == 'ER' && item.projectInfo.units.length">
                  <div>意向单元:</div>
                  <div class="cmr-unit-table hl-table">
                    <div class="dy-flex hl-table-th gradient-color">
                      <div class="dy-fx-1">楼宇</div>
                      <div class="dy-fx-1">楼层</div>
                      <div class="dy-fx-1 border-r">单元</div>
                    </div>
                    <div class="dy-flex hl-table-tb" v-for="(item, index) in item.projectInfo.units">
                      <div class="dy-fx-1">{{item.building_name}}</div>
                      <div class="dy-fx-1">{{item.floor_num}}</div>
                      <div class="dy-fx-1">{{item.unit_name}}</div>
                    </div>
                  </div>
                </div>

                <div v-if="item.intentType == 'WR' && item.projectInfo.wps.length">
                  <div>意向工位:</div>
                  <div class="cmr-wp-table hl-table">
                    <div class="dy-flex hl-table-th gradient-color">
                      <div class="dy-fx-4">楼宇</div>
                      <div class="dy-fx-1">楼层</div>
                      <div class="dy-fx-1">单元</div>
                      <div class="dy-fx-1">工位数</div>
                      <div class="position-item border-r">工位清单</div>
                    </div>
                    <div class="dy-flex hl-table-tb content-item" v-for="(single, index) in item.positionsList">
                      <div class="dy-fx-4">{{single.building_name}}</div>
                      <div class="dy-fx-1">{{single.floor_num}}</div>
                      <div class="dy-fx-1">{{single.unit_name}}</div>
                      <div class="dy-fx-1">{{single.positions.length}}</div>
                      <div class="position-item">
                        <span class="position">
                          <b v-for="(item1, index1) in single.positions">
                            {{item1.position_name}}<i v-if=" index1 + 1 !== single.positions.length">、</i>
                          </b>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="sperate-line"></div>
              </div>
            </div>
            <!-- 编辑意向 -->
            <section v-if="editYxFlag && editYxIndex == index">
              <div class="clearfix">
                <div class="title pull-left">意向信息{{index + 1}}</div>
                <div class="pull-right">
                  <hl-button size="mini" @on-click="cancelWill">取消</hl-button>
                  <hl-button size="mini" @on-click="saveWill('edit',item.intentId)">保存</hl-button>
                </div>
              </div>
              <div class="cmr-outerlayer">
                <div class="row mb-10">
                  <div class="col-md-1 pr-0">需求时间:</div>
                  <div class="col-md-2">
                    <web-calendar type="primary" v-model="beginTime" :afterdate="endTime" tips="起始日期"></web-calendar>
                  </div>
                  <div class="cmr-date-line">-</div>
                  <div class="col-md-2">
                    <web-calendar type="primary" v-model="endTime" :beforedate="beginTime" tips="截止日期"></web-calendar>
                  </div>
                </div>
                <div class="row mb-10">
                  <div class="col-md-1 pr-0">需求类型:</div>
                  <div class="col-md-11">
                    <span class="hl-radio mr-10" :class="{active:item.type == addWillData.type.active}"
                      :type="item.type" v-for="(item,index) in addWillData.type.list"
                      @click="selectYxType(item.type)">{{item.name}}</span>
                  </div>
                </div>
                <div class="row mb-10" v-if="addWillData.type.active == 'ER'">
                  <div class="col-md-1 pr-0">需求面积:</div>
                  <div class="col-md-2 pr-0">
                    <hl-select width="100%" :data="intentAreaData" v-model="addWillData.acreage" type="primary">
                    </hl-select>
                  </div>
                  <div class="col-md-1">m²</div>
                </div>
                <div class="row mb-10" v-if="addWillData.type.active == 'WR'">
                  <div class="col-md-1 pr-0">需求个数:</div>
                  <div class="col-md-1 pr-0">
                    <input type="text" class="form-control" v-model="addWillData.wp_count">
                  </div>
                  <div class="col-md-1">个</div>
                </div>
                <div class="row mb-10">
                  <div class="col-md-1 pr-0">需求车位:</div>
                  <div class="col-md-1 pr-0">
                    <input type="text" class="form-control" v-model="addWillData.st_count">
                  </div>
                  <div class="col-md-1">个</div>
                </div>
				<div class="row mb-10">
				  <div class="col-md-1 pr-0">预算金额:</div>
				  <div class="col-md-2 pr-0">
				    <input type="text" class="form-control" v-model.number="addWillData.budget_amount">
				  </div>
				  <div class="col-md-1">元</div>
				</div>
                <div class="row mb-10">
                  <div class="col-md-1 pr-0">意向项目:</div>
                  <div class="col-md-4">
                    <div class="select-ul cmr-pro-select">
                      <span class="select-name br-4 box-i-shadow">{{addWillData.project_name}}</span>
                      <ul>
                        <li v-for="(item, index) in projects.list"
                          @click="getProjectsId(item.projectId, item.projectName)">{{item.projectName}}</li>
                      </ul>
                    </div>
                  </div>
                  <div class="pull-left">
                    <button class="btn n-btn-primary" v-if="addWillData.type.active == 'ER'" @click="getBuildings(1)">
                      <span class="icon-Org-account mr-10"></span>意向单元
                    </button>

                    <button class="btn n-btn-primary" v-if="addWillData.type.active == 'WR'" @click="getBuildings(2)">
                      <span class="icon-Org-account mr-10"></span>意向工位
                    </button>
                  </div>
                </div>
                <div v-if="addWillData.type.active == 'ER' && unitData.length">
                  <div>意向单元:</div>
                  <div class="cmr-unit-table hl-table">
                    <div class="dy-flex hl-table-th gradient-color">
                      <div class="dy-fx-2">楼宇</div>
                      <div class="dy-fx-2">楼层</div>
                      <div class="dy-fx-2">单元</div>
                      <div class="dy-fx-1 border-r">操作</div>
                    </div>
                    <div class="dy-flex hl-table-tb" v-for="(item, index) in unitData">
                      <div class="dy-fx-2">{{item.buildingName || item.building_name}}</div>
                      <div class="dy-fx-2">{{item.floorNum || item.floor_num}}</div>
                      <div class="dy-fx-2">{{item.unitName || item.unit_name}}</div>
                      <div class="dy-fx-1">
                        <span class="icon-Gm-delete-2 color-999" @click="deleteUnit(index)"></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="addWillData.type.active == 'WR' && wpData.length">
                  <div>意向工位:</div>
                  <div class="cmr-wp-table hl-table">
                    <div class="dy-flex hl-table-th gradient-color">
                      <div class="dy-fx-4">楼宇</div>
                      <div class="dy-fx-1">楼层</div>
                      <div class="dy-fx-1">单元</div>
                      <div class="dy-fx-1">工位数</div>
                      <div class="position-item border-r">工位清单</div>
                    </div>
                    <div class="dy-flex hl-table-tb content-item" v-for="(item, index) in wpData">
                      <div class="dy-fx-4">{{item.building_name}}</div>
                      <div class="dy-fx-1">{{item.floor_num}}</div>
                      <div class="dy-fx-1">{{item.unit_name}}</div>
                      <div class="dy-fx-1">{{item.positions.length}}</div>
                      <div class="position-item">
                        <span class="position">
                          <span v-for="(item0, index0) in item.positions" @click="delwp(item, index0,index)">
                            {{item0.position_name}}
                            <i class="icon-Gm-delete-2"></i>
                          </span>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="sperate-line"></div>
              </div>
            </section>
          </section>

          <!-- 添加意向 -->
          <section v-if="yxFlag">
            <div class="clearfix">
              <div class="title pull-left">意向信息{{addYxIndex+1+willsList.length}}</div>
              <div class="pull-right">
                <hl-button size="mini" @on-click="cancelWill">取消</hl-button>
                <hl-button size="mini" @on-click="saveWill('add')">保存</hl-button>
              </div>
            </div>
            <div class="cmr-outerlayer">
              <div class="row mb-10">
                <div class="col-md-1 pr-0">需求时间:</div>
                <div class="col-md-2">
                  <web-calendar type="primary" v-model="beginTime" :afterdate="endTime" tips="起始日期"></web-calendar>
                </div>
                <div class="cmr-date-line">-</div>
                <div class="col-md-2">
                  <web-calendar type="primary" v-model="endTime" :beforedate="beginTime" tips="截止日期"></web-calendar>
                </div>
              </div>
              <div class="row mb-10">
                <div class="col-md-1 pr-0">需求类型:</div>
                <div class="col-md-11">
                  <span class="hl-radio mr-10" :class="{active:item.type == addWillData.type.active}" :type="item.type"
                    v-for="(item,index) in addWillData.type.list" @click="selectYxType(item.type)">{{item.name}}</span>
                </div>
              </div>
              <div class="row mb-10" v-if="addWillData.type.active == 'ER'">
                <div class="col-md-1 pr-0">需求面积:</div>
                <div class="col-md-2 pr-0">
                  <hl-select width="100%" :data="intentAreaData" v-model="addWillData.acreage" type="primary">
                  </hl-select>
                </div>
                <div class="col-md-1">m²</div>
              </div>
              <div class="row mb-10" v-if="addWillData.type.active == 'WR'">
                <div class="col-md-1 pr-0">需求个数:</div>
                <div class="col-md-1 pr-0">
                  <input type="text" class="form-control" v-model="addWillData.wp_count">
                </div>
                <div class="col-md-1">个</div>
              </div>
              <div class="row mb-10">
                <div class="col-md-1 pr-0">需求车位:</div>
                <div class="col-md-1 pr-0">
                  <input type="text" class="form-control" v-model="addWillData.st_count">
                </div>
                <div class="col-md-1">个</div>
              </div>
			  <div class="row mb-10">
			    <div class="col-md-1 pr-0">预算金额:</div>
			    <div class="col-md-2 pr-0">
			      <input type="text" class="form-control" v-model.number="addWillData.budget_amount">
			    </div>
			    <div class="col-md-1">元</div>
			  </div>
              <div class="row mb-10">
                <div class="col-md-1 pr-0">意向项目:</div>
                <div class="col-md-4">
                  <div class="select-ul cmr-pro-select">
                    <span class="select-name br-4 box-i-shadow">请选择</span>
                    <ul>
                      <li v-for="(item, index) in projects.list"
                        @click="getProjectsId(item.projectId, item.projectName)">{{item.projectName}}</li>
                    </ul>
                  </div>
                </div>
                <div class="pull-left">
                  <hl-button icon="icon-Org-account" type="primary" @on-click="getBuildings(1)"
                    v-if="addWillData.type.active == 'ER'">意向单元</hl-button>
                  <hl-button icon="icon-Org-account" type="primary" @on-click="getBuildings(2)"
                    v-if="addWillData.type.active == 'WR'">意向工位</hl-button>
                </div>
              </div>
              <!-- 意向单元 -->
              <div v-if="addWillData.type.active == 'ER' && unitData.length">
                <div>意向单元:</div>
                <div class="cmr-unit-table hl-table">
                  <div class="dy-flex hl-table-th gradient-color">
                    <div class="dy-fx-2">楼宇</div>
                    <div class="dy-fx-2">楼层</div>
                    <div class="dy-fx-2">单元</div>
                    <div class="dy-fx-1 border-r">操作</div>
                  </div>
                  <div class="dy-flex hl-table-tb" v-for="(item, index) in unitData">
                    <div class="dy-fx-2">{{item.building_name}}</div>
                    <div class="dy-fx-2">{{item.floor_num}}</div>
                    <div class="dy-fx-2">{{item.unit_name}}</div>
                    <div class="dy-fx-1">
                      <span class="icon-Gm-delete-2 color-999" @click="deleteUnit(index)"></span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 意向工位 -->
              <div v-if="addWillData.type.active == 'WR' && wpData.length">
                <div>意向工位:</div>
                <div class="cmr-wp-table hl-table">
                  <div class="dy-flex hl-table-th gradient-color">
                    <div class="dy-fx-4">楼宇</div>
                    <div class="dy-fx-1">楼层</div>
                    <div class="dy-fx-1">单元</div>
                    <div class="dy-fx-1">工位数</div>
                    <div class="position-item border-r">工位清单</div>
                  </div>
                  <div class="dy-flex hl-table-tb content-item" v-for="(item, index) in wpData">
                    <div class="dy-fx-4">{{item.building_name}}</div>
                    <div class="dy-fx-1">{{item.floor_num}}</div>
                    <div class="dy-fx-1">{{item.unit_name}}</div>
                    <div class="dy-fx-1">{{item.positions ? item.positions.length : '0'}}</div>
                    <div class="position-item">
                      <span class="position">
                        <span v-for="(item0, index0) in item.positions" @click="delwp(item, index0)">
                          {{item0.position_name}}
                          <i class="icon-Gm-delete-2"></i>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="sperate-line"></div>
            </div>
          </section>
          <hl-button type="primary" @on-click="addWill">添加意向</hl-button>
        </div>
        <!-- 相关文件 -->
        <div v-show="loadFileModule">
          <div class="contract-file-container mt-15">
            <div class="upload-head-contract clearfix border-b pb-10">
              <div class="pull-left font-16 line-height-34">文件列表</div>
            </div>
            <div>
              <ul>
                <li class="clearfix border-b" v-for="(item,index) in attachmentsList">
                  <p class="icon-Nav-contract-file file-name">
                    <span>{{item.name}}</span>
                  </p>
                  <p class="pull-right line-height-45 file-btn dy-flex opera-but"
                    style="align-items: center;height: 45px">
                    <a class="icon-GM-preview" @click="previewImage(item.url)">
                      <b>预览</b>
                    </a>
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 添加单元弹出层 -->
        <section class="pop" v-if="bounced.unitFlag">
          <div class="head-pop font-16"><span class="title">添加单元</span>
            <button class="fw-close absolute" @click="closeAddUnitPop">×</button>
          </div>
          <div class="content border-b">
            <!-- 选择容器 -->
            <div class="clearfix select-row">
              <div class="pull-left clearfix">
                <div class="pull-left hl-34 mr-10">选择楼宇:</div>
                <div class="pull-left building-select unit-name">
                  <div class="select-ul">
                    <span class="select-name br-4 box-i-shadow">请选择</span>
                    <ul>
                      <li v-for="item in projects.builddata" @click="getBuildId(item.buildingId, item.names)">
                        {{item.names}}</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="pull-left clearfix">
                <div class="pull-left hl-34 mlr-10">选择楼层:</div>
                <div class="pull-left floor-select">
                  <div class="select-ul">
                    <span class="select-name br-4 box-i-shadow">请选择</span>
                    <ul>
                      <li v-for="(item, index) in projects.floorsdata" @click="getUnits(item.floorId, item.floorName)">
                        {{item.floorName}}</li>
                    </ul>
                  </div>
                </div>
              </div>
              <button class="btn n-btn-default mlr-10" @click="queryUnit">查询</button>
            </div>
            <!-- 内容 -->
            <div class="clearfix table">
              <div class="tb-title clearfix pull-left" style="width:62px;">
                <div class="last-unit">单元</div>
              </div>
              <ul class="tb-content pull-left" style="width:706px;">
                <li class="tb-item clearfix pt-10" v-if="projects.unitdata.length > 0">
                  <div class="last-unit unit-active">
                    <span v-for="(item, index) in projects.unitdata" @click="selUnit($event, index, item.unitId)"
                      :data-unitId="item.unitId" v-if="item.unitType == 'BU' && item.rentState != 'ZY'">
                      {{item.unitName.length > 9 ? item.unitName.substr(0,8)+'...' : item.unitName}}
                      <i class="icon-Nav-contract-choice selected-icon"></i>
                    </span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="button-container ptb-10 text-center">
            <hl-button type="primary" @on-click="confirmAddUnitsOrWp(1)">确认添加</hl-button>
          </div>
        </section>

        <!-- 添加工位弹出层 -->
        <section class="pop" v-if="bounced.wpFlag">
          <div class="head-pop font-16"><span class="title">添加工位</span>
            <button class="fw-close absolute" @click="closeAddwpPop">×</button>
          </div>
          <div class="content border-b">
            <!-- 选择容器 -->
            <div class="clearfix select-row">
              <div class="pull-left clearfix">
                <div class="pull-left hl-34 mr-10">楼宇:</div>
                <div class="pull-left building-select">
                  <div class="select-ul">
                    <span class="select-name br-4 box-i-shadow">请选择</span>
                    <ul>
                      <li v-for="item in projects.builddata" @click="getBuildId(item.buildingId, item.names)">
                        {{item.names}}</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="pull-left clearfix">
                <div class="pull-left hl-34 mlr-10">楼层:</div>
                <div class="pull-left floor-select">
                  <div class="select-ul">
                    <span class="select-name br-4 box-i-shadow">请选择</span>
                    <ul>
                      <li v-for="(item, index) in projects.floorsdata"
                        @click="getStWpUnitsList(item.floorId, item.floorName)">{{item.floorName}}</li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="pull-left clearfix">
                <div class="pull-left hl-34 mlr-10">单元:</div>
                <div class="pull-left unit-select">
                  <div class="select-ul">
                    <span class="select-name br-4 box-i-shadow">请选择</span>
                    <ul>
                      <li v-for="(item, index) in projects.unitdata" v-if="item.unitType == 'WP'"
                        @click="getWp(item.unitId, item.unitName, index)">{{item.unitName}}</li>
                    </ul>
                  </div>
                </div>


              </div>
              <button class="btn n-btn-default mlr-10">查询</button>
            </div>
            <!-- 内容 -->
            <div class="clearfix table">
              <div class="tb-title clearfix pull-left" style="width:62px;">
                <div class="position">工位</div>
              </div>
              <ul class="tb-content pull-left" style="width:706px;">
                <li class="tb-item clearfix pt-10">
                  <div class="position st-unit wp-list">
                    <span v-for="(item, index) in projects.stWpdata"
                      @click.prevent="selectWp($event, index, item.positionId, item.positionName)"
                      :data-posId="item.positionId" v-if="item.rentState != 'ZY'">
                      {{item.positionName.length > 9 ? item.positionName.substr(0,8)+'...' : item.positionName}}
                      <i class="icon-Nav-contract-choice selected-icon"></i>
                    </span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="button-container ptb-10 text-center">
            <button class="btn n-btn-primary" @click="confirmAddUnitsOrWp(2)">确认添加</button>
          </div>
        </section>

        <div class="mtb-10" v-if="loadBuinessMesModule">
          <hl-button type="primary" @on-click="followBusiness"
            v-if=" data.themeInfo.status == 'SJJH' && quanxian.indexOf('c149') > -1 ">跟进线索</hl-button>
          <hl-button type="outline" @on-click="convertToCustomer" v-if=" data.themeInfo.status == 'SJJH' ">转为客户
          </hl-button>
          <hl-button type="outline" @on-click="closeBusiness" v-if=" data.themeInfo.status == 'SJJH' ">关闭线索
          </hl-button>
        </div>
      </div>
    </div>

    <!--关闭线索弹出层-->
    <div class="pop box-o-shadow" style="width:600px;" v-show="isShowBusinessLayer">
      <div class="head-pop font-16"><span>关闭线索</span>
        <button class="fw-close absolute close" type="button" @click="cancelCloseBusinessLayer">×</button>
      </div>
      <div class="content-pop">
        <div class="row mb-10">
          <div class="col-md-3 pr-0 text-right line-height-34"><span class="required">*</span>关闭原因：</div>
          <div class="col-md-4 pr-0">
            <div class="select-ul" id="reason-st">
              <span class="select-name br-4 box-i-shadow">{{closeReasonObj.closeReasonValue ?
                closeReasonObj.closeReasonValue : '请选择'}}</span>
              <ul>
                <li v-for="item in closeReason" @click="selectCloseReason(item.dictCode, item.dictName)">
                  {{item.dictName}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="row mb-10">
          <div class="col-md-3 pr-0 text-right line-height-34">关闭说明：</div>
          <div class="col-md-8">
            <textarea name="name" rows="8" cols="80" class="form-control" placeholder="请详细说明原因"
              v-model="closeReasonObj.closeDescription"></textarea>
          </div>
        </div>
      </div>
      <div class="fw-button">
        <hl-button type="primary" @on-click="confirmCloseBusiness">确定</hl-button>
        <hl-button type="outline" @on-click="cancelCloseBusinessLayer">取消</hl-button>
      </div>
    </div>

    <div class="backdrop" v-if="bounced.unitFlag"></div>
    <div class="backdrop" v-if="bounced.wpFlag"></div>
    <div class="backdrop" v-show="isShowBusinessLayer"></div>
    <div class="hoverTexts" v-show="texthover" :style="{left:lefthover, top:tophover}" @mouseenter="texthover = true"
      @mouseleave="texthover = false">
      <div></div>
      <ul class="instro">{{textLong}}</ul>
    </div>
  </div>

</section>


<script src="modules/rent/scripts/business_details.js" charset="utf-8"></script>